window.onload = function() {
    //业务逻辑:
    //1、点击左上角“运行”二字右边的 绿色图标，可将其拖动到下面的地图上。拖动之后原位置仍然需要保留图标，为再次拖动做准备。
    //2、点击右上角的对勾，保存拖动到地图上图标的位置信息（可通过各种域或在js中临时保存）。
    //3、点击右上角的x，可清除地图上的所有图标。点击左上角的“运行”二字，之前保存好的图标可在地图上又重新显示出来。

    let opeartion = document.getElementById("opeartion");
    let imgBox = document.getElementById("imgBox");
    let imgs = imgBox.getElementsByTagName("img")
    let ul = opeartion.getElementsByTagName("ul")[0];
    let lis = ul.getElementsByTagName("li");
    let lighting = document.getElementById("lighting");
    let memory = document.getElementById("memory");
    let save = document.getElementById("save");
    let clear = document.getElementById("clear");

    //取消不允许目标区域成为容器的浏览器默认行为
    opeartion.ondragover = function(event) {
        event.preventDefault();
    }
    var moveSrc = null;
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].ondragstart = function() {
            moveSrc = this.src;
        }
    }
    //遍历容器
    for (var i = 0; i < lis.length; i++) {
        lis[i].ondrop = function(event) {
            //图标拖动在容器上时 改变显示
            event.preventDefault();
            this.style.background = "url(" + moveSrc + ")";
            this.style.border = "none";
            this.style.backgroundSize = "20px 20px";
        }
    }
    //存储开关数据
    var data = [];
    save.onclick = function() {
        for (var i = 0; i < lis.length; i++) {
            if (lis[i].style.background) {
                data[i] = lis[i].style.background;
            } else {
                data[i] = "null";
            }
        }
        window.localStorage.setItem("src", data);
    }

    //取出数据
    memory.onclick = function() {
        data = window.localStorage.getItem("src").split(",");
        for (var i = 0; i < data.length; i++) {
            if (data[i] != "null") {
                lis[i].style.background = data[i];
                lis[i].style.border = "none";
            } else {
                lis[i].style.background = "none";
                lis[i].style.border = "1px solid #c4c4c4";
            }
        }
    }

    //清除坐标
    clear.onclick = function() {
        for (var i = 0; i < lis.length; i++) {
            lis[i].style.background = "none";
            lis[i].style.border = "1px solid #c4c4c4";
        }
    }
}
